<template>
	<view class="more">
		<view class="fixed-box">
			<view class="flex flai fljcsb search">
				<view class="search-box flex flai flex1">
					<image src="../../static/img/search.png" mode="" class="search-icon"></image>
					<input type="text" value="" confirm-type="search" @confirm="search" v-model="keyword" class="flex1"
					 placeholder="请输入商家" />
					<image src="../../static/img/close01.png" @click="clickInput" v-if="keyword.length>0" mode="" class="clear-input"></image>
				</view>
			
			
			</view>
			<view class="all-bazaar" v-if="showType==1">
				<view class="more-title flex fljc flai">
					<view class="line"></view>
					<view class="title-con">所有市场</view>
					<view class="line"></view>
				</view>
				<view class="bazaar-list">
					<text v-for="(item,index) in list" :key="index" :class="[navIndex==index?'active':'']" @click="query(item.name,index)">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="" :style="{'height':mtHieght+'px'}" v-if="showType==1"></view>
		<view class="more-list" v-if="showType==1">
			<view class="more-box" v-for="(item,index) in list" :data-name="item.name" :key="index">
				<view class="more-title flex fljc flai">
					<view class="line"></view>
					<view class="title-con">{{item.name}}</view>
					<view class="line"></view>
				</view>
				<div class="bazaar-box flex flai">
					<view @click="toDetail(secondItem)" class="bazaar-brand" v-for="(secondItem,secondIndex) in item.rows" :key="secondIndex">
						<image :src="secondItem.picUrl" mode=""></image>
						<view class="merchant-title">{{secondItem.name}}</view>
						<view class="merchant-small-title line-clamp-one">{{secondItem.storeLocation}}</view>
					</view>
				</div>
			</view>
		</view>
		<view style="height: 140rpx;"></view>
		<view class="more-list" v-if="showType==2">
			<view class="more-box" v-if="searchList.length>0">
				
				<div class="bazaar-box flex flai">
					<view @click="toDetail(secondItem)" class="bazaar-brand" v-for="(secondItem,secondIndex) in searchList" :key="secondIndex">
						<image :src="secondItem.picUrl" mode=""></image>
						<view class="merchant-title">{{secondItem.name}}</view>
						<view class="merchant-small-title line-clamp-one">{{secondItem.storeLocation}}</view>
					</view>
				</div>
			</view>
			<view class="no-data" v-else>
				暂无数据
			</view>
		</view>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import API from '../../api/index.js'
	export default {
		data() {
			return {

				keyword:'',
				list: [],
				scrollNow: 0,
				mtHieght: 83,
				navIndex:0,
				showType:1,
				searchList:[]
			}
		},
		onLoad(opt) {
			var _this = this
			this.getList(opt.name)
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					console.log(res.windowWidth); // 屏幕的宽度 

					let info = uni.createSelectorQuery().select(".fixed-box");
					info.boundingClientRect(function(data) { //data - 各种参数
						console.log(data.height) // 获取元素宽度
						_this.mtHieght = data.height + 60
						console.log('高度')
					}).exec()
				}
			});

		},
		methods: {
			// 清空搜索框
			clickInput() {
				console.log('点我')
				this.keyword = ''
				this.searchList =[]
				this.showType = 1
				this.getList('')
			},
			search() {
				console.log('开始搜索')
				this.showType = 2
				API.indexHome.moreMechartSearch({name:this.keyword}).then(res => {
					if (res.errno == 0) {
						console.log('进入')
						this.searchList = res.data
						console.log(res.data)
					}
				})
			},
			getList(name) {
				API.indexHome.moreMechart().then(res => {
					console.log(res)
					if (res.errno == 0) {
						this.list = res.data
						if (name) {
							console.log(name)
							setTimeout(() => {
								this.query(name)
							}, 10)

						}
					}
				})
			},
			// 去商家情
			toDetail(item) {
				uni.navigateTo({
					url: "/pages/mechartDetail/mechartDetail?id=" + item.id
				})
			},
			query(currentCityName,index) {
			this.navIndex=index
				var that = this

				uni.createSelectorQuery().selectAll('.more-box').fields({
					dataset: true,
					size: true,
					rect: true
				}, function(res) {
					res.forEach(function(re) {
						console.log(re)
						if (currentCityName == re.dataset.name) {
							console.log(re.dataset.name)
							var top = re.top+ that.scrollNow -150
							console.log(top)
							uni.pageScrollTo({
								scrollTop: top,
								duration: 0
							})

						}
					})
				}).exec();
			},
			onPageScroll: function(e) { // 获取滚动条当前位置
				this.scrollNow = e.scrollTop
				console.log(this.scrollNow)

			},

		}

	}
</script>

<style>
	@import url("./more.css");
</style>
